<template>
  <view class="main">
    <view class="item" v-for="(item, idx) in personData.list" :key="idx">
      <view class="check_img" v-if="pageOptions.fromPage !== 'personal'">
        <img
          @click="choosePerson(item)"
          v-show="!choosePersonList.includes(item.id)"
          src="https://img.qumoyugo.com/webimgbg/personnel_management_normal_icon.png"
          class="img"
        />
        <img
          @click="unChoosePerson(item)"
          v-show="choosePersonList.includes(item.id)"
          src="https://img.qumoyugo.com/webimgbg/personnel_management_pitch_icon.png"
          class="img"
        />
      </view>
      <view class="content" @click="choosePerson(item)" v-show="!choosePersonList.includes(item.id)">
        <view class="contact"
          >{{ item.name }} <span class="tel_span">{{ item.phone }}</span></view
        >
      </view>
      <view class="content" @click="unChoosePerson(item)" v-show="choosePersonList.includes(item.id)">
        <view class="contact"
          >{{ item.name }} <span class="tel_span">{{ item.phone }}</span></view
        >
      </view>
      <view class="edit_img" @click="gotoPage(item)">
        <img v-show="true" src="https://img.qumoyugo.com/webimgbg/personnel_management_compile_icon.png" class="img" />
      </view>
    </view>

    <uni-load-more
      :status="personData.status"
      :icon-size="5"
      :content-text="personData.contentText"
      v-if="personData.list.length < personData.total"
    />

    <view class="footer-btn" @click="gotoPage(undefined)">
      <img
        v-show="true"
        src="https://img.qumoyugo.com/webimgbg/personnel_management_add_icon.png"
        class="img"
      />添加人员
    </view>
    <view class="bottom_div" v-if="choosePersonList.length > 0">
      <view>
        <button class="submitOrder" @click="submit()">确定</button>
      </view>
    </view>
  </view>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue'
import { onPullDownRefresh, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app'

const { $https } = getCurrentInstance().appContext.config.globalProperties
const personData = ref({
  reload: false,
  status: 'more',
  contentText: {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '我是有底线的~'
  },
  list: [],
  query: {
    page: 1,
    pageSize: 10
  },
  total: 0
})
const pageOptions = ref({})
const choosePersonList = ref([])
onLoad(options => {
  pageOptions.value = options
  if (options.choosePersonList && options.choosePersonList.length > 0) {
    choosePersonList.value = []
    const choose = decodeURIComponent(options.choosePersonList).split(',')
    choose.forEach(item => choosePersonList.value.push(Number(item)))
    console.log(choosePersonList.value)
  }
})
onShow(() => {
  personData.value.query.page = 1
  personData.value.list = []
  getPersonList()
})
// 下拉刷新，请求第一页
onPullDownRefresh(() => {
  personData.value.query.page = 1
  personData.value.list = []
  getPersonList().then(row => {
    uni.stopPullDownRefresh()
  })
})
const gotoPage = data => {
  if (data) {
    console.log(data)
    uni.navigateTo({
      url: '/user/addPerson?data=' + encodeURIComponent(JSON.stringify(data))
    })
  } else {
    uni.navigateTo({
      url: '/user/addPerson'
    })
  }
}
// 上拉加载
onReachBottom(() => {
  if (personData.value.total > personData.value.list.length) {
    personData.value.status = 'loading'
    personData.value.query.page += 1
    getPersonList()
  } else {
    personData.value.status = 'no-more'
  }
})
const choosePerson = item => {
  choosePersonList.value.push(item.id)
}
const unChoosePerson = item => {
  choosePersonList.value = choosePersonList.value.filter(function (pId) {
    return pId !== item.id
  })
}
const getPersonList = () => {
  personData.value.query.customerId = pageOptions.value.id
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/personnelManage/page/list',
      type: '',
      method: 'get',
      data: personData.value.query
    })
      .then(res => {
        if (res.code === 0) {
          personData.value.list = personData.value.list.concat(res.data.items)
          personData.value.total = res.data.pagination.total_record
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}

const submit = () => {
  const returnData = personData.value.list.filter(f => {
    return choosePersonList.value.includes(f.id)
  })
  uni.$emit('getPersonInfo', { personInfo: returnData })
  uni.navigateBack({ delta: 1 })
}
</script>
<style scoped lang="scss">
.main {
  min-height: 100vh;
  background-color: #f4f4f4;
  padding: 20rpx 20rpx calc(env(safe-area-inset-bottom) + 178rpx);
}
.bottom_div {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f4f4f4;
  padding-bottom: 16rpx;
  padding-top: 20rpx;
}
.submitOrder {
  width: 444rpx;
  height: 90rpx;
  background: #525fa2;
  border-radius: 45rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 90rpx;
  font-size: 32rpx;
}
.item {
  background: #ffffff;
  border-radius: 18rpx;
  padding: 78rpx 30rpx;
  margin-top: 20rpx;
  display: flex;
  .content {
    width: 86%;
    line-height: 32rpx;
  }
  .check_img {
    padding: 0 32rpx;
    .img {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .edit_img {
    padding: 0 32rpx;
    .img {
      width: 28rpx;
      height: 27rpx;
    }
  }
}
.item:first-child {
  margin-top: 0;
}
.tel_span,
.contact {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}
.address {
  margin-top: 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.footer-btn {
  margin: 0 auto;
  margin-top: 40rpx;
  margin-bottom: 200rpx;
  width: 264rpx;
  height: 69rpx;
  background: #525fa2;
  border-radius: 18rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 62rpx;
  .img {
    width: 19rpx;
    height: 19rpx;
    padding-right: 5rpx;
  }
}
</style>
